<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-padding影响盒子的实际大小</title>
    <style>
        /*
        当我们给盒子指定 padding 值之后，发生了 2 件事情：
  1. 内容和边框有了距离，添加了内边距。
  2. padding影响了盒子实际大小。
  也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
  解决方案：
  如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
        */
        div {
            width: 160px;
            height: 160px;
            background-color: pink;
            padding: 20px;
        }

    </style>
</head>
<body>
<div>
    padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小
</div>

</body>
</html>